<template>
  <div class="home-list">
    <van-card v-for="(v, i) in lessonList" :key="i" :price="v.price" :title="v.title" :thumb="v.poster">
      <template #tags>
        <van-tag plain>{{ formateCategory(v.cateory) }}</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType } from '@vue/runtime-core'
import { ILesson } from '@/typings/home'
import { Card, Tag } from 'vant'

export default defineComponent({
  props: {
    lessonList: {
      type: Array as PropType<ILesson[]>
    }
  },
  components: {
    'van-card': Card,
    'van-tag': Tag
  },
  setup() {
    function formateCategory(type: string) {
      console.log(type)
      switch (type) {
        case '1':
          return 'react'
        case '2':
          return 'vue课程'
        default:
          return '暂时没有处理'
      }
    }
    return {
      formateCategory
    }
  }
})
</script>

<style lang='scss'>
.home-list{
  height: 100%;
  overflow: hidden;
}
</style>
